import React, { useState } from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
import { homeRoutes } from "../../router/routerconfig";
import { Routeritem } from "../../utils/type";
const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    path: string,
    key?: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label: <NavLink to={path}>{label}</NavLink>
    } as MenuItem;
}

// const items: MenuItem[] = [
//   getItem('Option 1', '1', <PieChartOutlined />),
//   getItem('Option 2', '2', <DesktopOutlined />),
//   getItem('User', 'sub1', <UserOutlined />, [
//     getItem('Tom', '3'),
//     getItem('Bill', '4'),
//     getItem('Alex', '5'),
//   ]),
//   getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//   getItem('Files', '9', <FileOutlined />),
// ];

const App: React.FC = () => {
    const navigate = useNavigate()
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const renderitem = (arr: Routeritem[]) => {
        let kitem: MenuItem[] = []
        arr && arr.forEach((item: Routeritem, index: number) => {
            if (item.children) {
                kitem.push(getItem(item.title, item.path, item.id, iconstr(item.icon as string), renderitem(item.children)))
            }
            else {
                kitem.push(getItem(item.title, item.path, item.id, iconstr(item.icon as string)))
            }
        })
        return kitem
    }

    const iconstr = (str: string) => {
        let icon
        switch (str) {
            case "DesktopOutlined":
                return icon = <DesktopOutlined />
            case "FileOutlined":
                return icon = <FileOutlined />
            case "PieChartOutlined":
                return icon = <PieChartOutlined />
            case "TeamOutlined":
                return icon = <TeamOutlined />
            case "UserOutlined":
                return icon = <UserOutlined />
            default:
                break;
        }
    }

    const tc=()=>{
        localStorage.removeItem('token')
        navigate('/login')
    }

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical" />
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={renderitem(homeRoutes)} />
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }} >
                    {
                        localStorage.getItem('obj')?
                        <span>
                            尊敬的：{JSON.parse(localStorage.getItem('obj') as string).username}
                            身份是：{localStorage.getItem('rolename')}
                        </span>
                        :''
                    }
                    <button onClick={tc}>安全退出</button>
                </Header>
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet></Outlet>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default App;